<template>
  <view class="props-table">
    <view v-for="(item, index) in data" :key="index" class="props-table__item">
      <view class="props-title">
        <text>{{ item.key }}</text>
      </view>
      <view class="prop-opt-wrap">
        <view v-for="(value, i) in item.values" :key="i" class="prop-item-wrap">
          <text>{{ value }}</text>
        </view>
        <view class="prop-item-wrap-empty"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default() {
        return [
          // {
          //   key: "温度",
          //   values: ["常温", "冰"]
          // },
          // {
          //   key: "温度",
          //   values: ["常温", "冰"]
          // }
        ];
      }
    }
  },
  data() {
    return {};
  }
};
</script>

<style scoped lang="scss">
.props-table {
  width: 80%;
  margin: 0 auto;
  .props-title {
    color: $uni-text-color-grey;
    font-size: $uni-font-size-lg;
    margin-bottom: 20rpx;
  }
  .prop-opt-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    flex-wrap: wrap;
    .prop-item-wrap {
      box-sizing: border-box;
      font-size: $uni-font-size-base;
      width: 30%;
      padding: 10rpx 0;
      text-align: center;
      background-color: $uni-bg-color-grey;
    }
    .prop-item-wrap-empty {
      width: 30%;
      height: 0;
    }
  }
}
</style>
